﻿/// <reference path="~/app/libs/sencha-touch-debug.js" />
Ext.define("iMobileS.view.CheckoutContainer", {
    extend: "Ext.form.Panel",
    alias: "widget.checkoutcontainer",
    initialize: function () {
        this.callParent(arguments);

        var backbutton = {
            xtype: "button",
            text: "Back",
            ui: "back",
            handler: this.onBackToHome,
            scope: this
        };

        //Define for top toolbar
        var topToolbar = {
            xtype: "toolbar",
            title: 'Shopping cart',
            docked: "top",
            items: [backbutton,
            {
                xtype: "spacer"
            }]
        };

        var yourSelection = {
            xtype: "panel",
            layout: "hbox",
            docked: "top",
            style: "padding: 5px; padding-bottom: 0px;",
            items: [{
                flex: 1,
                xtype: "panel",
                cls: "your-selection-text",
                html: "<div>Your selections.</div>"
            }]
        };

        //Get selection list
        var selections = {
            xtype: "selections",
            store: Ext.getStore("Products"),
            flex: 1,
            scrollable: false,
            ui: "round",
            layout: {
                type: 'vbox',
                pack: 'start'
            },
            cls: 'selection-list'
        };


        var selectionFooter = {
            xtype: "panel",
            layout: "hbox",
            style: "padding: 7px; 7px 0px 7px",            
            items: [
                        {
                            flex: 1,
                            xtype: "panel",
                            cls: "check-out-text",
                            html: "<div>&nbsp;</div>"
                        }, {
                            flex: 1,
                            xtype: "panel",
                            width: 250,
                            style:'margin-right:8px',
                            items: [
                                    {
                                        xtype: "textfield",
                                        id: 'Handling',
                                        name: 'Handling',
                                        label: '<div class=\"selection-check-box\">Discount:</div>',
                                        readOnly: true,
                                        labelAlign: "left",
                                        labelWidth: "50%"
                                    }, {
                                        xtype: "textfield",
                                        id: 'OrderTotal',
                                        name: 'OrderTotal',
                                        readOnly: true,
                                        label: '<div class=\"selection-check-box\">Order Total:</div>',
                                        labelAlign: "left",
                                        labelWidth: "50%"
                                    }
                                ]
                        }
                    ]
        };

        //Mailing box
        var mailingBox = {
            xtype: "panel",
            flex: 1,
            style: "padding: 10px; 0px;",
            items: [{
                id: "btnMailing",
                xtype: "button",
                cls: "mailing-button",
                text: "Mailing information",
                handler: this.onSelectCustomer,
                scope: this
            }]
        };

        //Add control to container
        this.add([
            topToolbar,
            yourSelection,
            selections,
            selectionFooter,
            mailingBox
        ]);
    },
    config: {
        fullscreen: true,
        layout: {
            type: 'auto'
        }
    },
    onBackToHome: function () {
        this.fireEvent("onBackToHome", this);
    },
    onSelectCustomer: function () {
        this.fireEvent("onSelectCustomer", this);
    }
});